@charset "utf-8";
*{margin: 0;padding: 0;}
 li{list-style:none;}
a{text-decoration:none;}
img{vertical-align: top;border: none;}
.clear::after{
	height: 0;
	content: "";
	visibility: hidden;
	clear: both;
	display: block;
}       
.clear{zoom: 1;}

header {
    width: 100%;
    height: 130px;
    background-color: #111521;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    min-width: 1263px;
}
.wrap-header {
    height: 90px;
    border-bottom: 1px solid #333333;
   
}
.box {
    width: 1263px;
    margin: 0 auto;
    height:90px;
    display: flex;
    justify-content: space-between;
    align-items:center;
}
 .logo {
    width: 300px;
    height: 49px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    a {display: inline-block;}
}

 .user {
    width: 550px;
    height: 44px;
    display: flex;
    align-items:center;
    ul {
        width: 550px;
        height: 44px;
        display: flex;
        justify-content: space-around;
        align-items:center;
        .btn-user{
            width: 80px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            background-color: #232a3f;
            border-radius: 5px;
            color: #b3bed1;
            a{  
                display: block;
                color: #b3bed1;
                text-align: center;
                line-height: 30px;
                
            }
        }
        .btn-user:hover{
            background-color: #5289f0;
        }
        .user-shop {
            font-size: 12px;
            a {
                display: block;
                color: #999999;
                height: 44px;
                line-height: 44px;
                i{
                    font-size: 18px !important;
                    padding-right: 5px;
                    margin-top: 3px;
                    color: #999999;
                }
            }
        }
        .user-login{
            font-size: 12px;
            color: #999999;
            display: none;
        }
        .user-show {
            display: none;
        }
    }
}
.shop-btn{
    width: 65px;
    height: 390px;
    background-color: #1f1f20;
    position: absolute;
    right: 10px;
    top: 140px;
    .shop-btn-top{
        width: 65px;
        height: 65px;
        position: relative;
        &>a{
            display: block;
            &>i{    
                display: block;
                position: absolute;
                top:50%;
                left: 50%;
                margin-top: -18px;
                margin-left: -16px;
                font-size: 30px !important;
                color: #999999;
            
          }
        }
      
    }
   
    .shop-btn-cent{
        width: 65px;
        height: 195px;
        background-color: #5289f0;
        text-align: center;
        &>a{
            width: 65px;
            height: 195px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color:wheat ;
            &>i{
                display: block; 
                font-size: 30px !important;
            }
            &>span{
                display: block; 
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: wheat;
                color: #5289f0;
                line-height: 30px;
                text-align: center;

            }
        }
        
    }
  
    
}



@mixin center($px:1000px) {
    margin: {
      left: auto;
      right: auto;
    }
    width: $px;
  }
.wrap-nav {
    @include center(1263px);
    display: flex;
    height: 39px;
    justify-content: space-between;
    align-items:center;
    ul {
        width: 802px;
        display: flex;
        justify-content: space-between;
        align-items:center;
        li{
            font-size: 16px;
            height: 39px;
            a{
                color: #999999;
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                height: 38px;
                line-height: 38px;  
            }
            .ac{
                color: #5289f0;
                // border-bottom: 1px solid #5289f0;
            }
            a:hover {
                color: #5289f0;
               
            }
        }
    }
    form {
        width: 250px;
        height: 39px;
        border: none;
        display: flex;
        justify-content:flex-start;
        input {
            width: 190px;
            height: 39px;
            border: none;
            background-color: #0c101c;
            outline: none;
            padding-left: 20px;
            color:#999999;
        }
        button{
            width: 40px;
            height: 39px;
            background-color: #23293f;
            border: none;
            outline: none;
            i{
                display: block;
                font-size: 18px !important;
                color: #999999;
            }
        }
    }
}

.login{
    display: none;
    width: 779px;
    height: 484px;
    position: absolute;
    border: 1px solid #979797;
    top: 140px;
    z-index: 1200;
    left: 50%;
    margin-left: -390px;
    background-color: white;
    .login-top{
        width: 779px;
        height: 4px;
        background-color: #dd4848;
    }
    &>div{
        width: 779px;
        height: 480px;

        .login-left{
            width: 333px;
            height: 450px;
            float: left;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center; 
            .p-top{
                font-size: 20px;
                color: #999999;
            }
            .p-bottom{
                font-size: 12px;
                color: #999999;
                text-align: center;
                span{
                    color: #ff4d4d;
                }
            }
            .two-code{
                width: 190px;
                height: 190px;
                border: 1px solid #999999;
                position: relative;
                .img1{
                    width: 124px;
                    height: 124px;
                    position: absolute;
                    top:32px;
                    left:32px;
                    background-color: darkcyan;
                }
                .img2{
                  position: absolute;
                  left: 142px;
                  z-index: 1300;
                  top:-97px;
                  display: none;
                }
            }
            .two-code:hover{
               .img2{
                   display: block;
               }

            }
        }
        .login-right{
            width: 440px;
            height: 478px;
            float: right;
            ul{
                width: 440px;
                height: 40px;
                display: flex;
                justify-content: flex-end;
                li{
                    font-size: 12px;
                    line-height: 40px;
                    a{
                        color: #999999;
                    }
                }
            }
            .del-btn-top{
                width: 440px;
                height: 28px;
                display: flex;
                justify-content: flex-end;
                span{
                    display: inline-block;
                    width: 38px;
                    height: 28px;
                    text-align: center;
                    line-height: 28px;
                    border-left: 1px solid #999999;
                }
                span:hover{
                    background-color: #ff4d4d;
                }
            }
            .cent-box{
                width: 439px;
                height: 410px;
                border-left: 1px solid #999999;
                .p-c{
                    padding-left: 30px;
                    height: 57px;
                    width: 409px;
                    color: #ababab;
                    font-size: 16px;
                }
                input{
                    display: block;
                    margin-left: 30px;
                    border: 1px solid #ababab; 
                    outline: none;
                    height: 53px;
                    width: 279px;
                    border-radius: 5px;
                    padding-left: 30px;
                    margin-bottom: 16px;
                }
                .spa-btn{
                    height: 45px;
                    padding-left: 30px;
                    span{
                        width: 115px;
                        height: 45px;
                        display: inline-block;
                        border-radius: 5px;
                        text-align: center;
                        line-height: 45px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                    .btn-one-span {
                        background-color: #ff5050;
                        color: white;
                        
                    }
                    .btn-two-span{
                        margin-left: 10px;
                        border: 1px solid #dedede;
                        background-color: #f8f7f7;
                        color: #666666;
                    }
                }
                .last-deger {
                    height: 40px;
                    font-size: 16px;
                    font-weight: bold;
                    width: 100%;
                    text-align: center;
                    line-height: 40px;
                    color: rgb(26, 235, 154);
                    display: none;

                }
                .frist-deger {
                    height: 40px;
                    font-size: 16px;
                    font-weight: bold;
                    width: 100%;
                    text-align: center;
                    line-height: 40px;
                    color: rgb(235, 26, 26);
                    display: none; 
                }
            }
        }
    }
    
}
